<template>
  <div id="category">
    <nav-bar class="nav-bar">
      <div slot="center">商品分类</div>
    </nav-bar>
    <div class="category-menu">
      <side-nav-bar class="side-nav-bar"
                    :category-list="categoryList"
                    @itemClick="getCurrentType"></side-nav-bar>
      <b-scroll class="category-main-show">
        <category-main ref="categoryMain"></category-main>
      </b-scroll>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";
import BScroll from "@/components/common/bScroll/BScroll";
import SideNavBar from "./childComponents/SideNavBar";
import CategoryMain from "./childComponents/CategoryMain";
import {getCategory} from "@/network/category";

export default {
  name: "Category",
  data() {
    return {
      categoryList: [],
    }
  },
  components: {
    NavBar,
    SideNavBar,
    CategoryMain,
    BScroll
  },
  methods: {
    getCurrentType(item) {
      console.log(item);
      this.$refs.categoryMain.$data.currentType = item.maitKey
    }
  },
  created() {
    getCategory().then(info => {
      this.categoryList = info.data.category.list;
    })
  }
}
</script>

<style scoped>
  .nav-bar {
    background-color: var(--color-tint);
    font-size: 20px;
    color: #ffffff;
  }
  .category-menu {
    display: flex;
  }
  .side-nav-bar {
    flex: 30%;
  }
  .category-main-show {
    flex: 70%;
    height: calc(100vh - 89px);
    overflow: hidden;
  }
</style>
